<template>
	<!-- <view style="position: relative;"> -->
	<view class="cu-form-group" style="position: relative;">
		<view class="title">
			单据
			<view style="width: 60rpx;display: inline-block;">
				<uni-icons type="locked-filled" color="#d02f2a" v-if="bill_lock"></uni-icons>
			</view>
		</view>
		<input :disabled="readonly" placeholder="单据编号" :value="bill" @input="
					e => {
						bill = (e.detail.value + '').toUpperCase();
					}
				"
		 name="input" type="text" @confirm="setValueAndTriggerEnter(bill)" />

		<button class="cu-btn bg-green shadow" @click="openChooseBillModal">选择</button>


		<!-- 选择单号 -->
		<view class="cu-modal bottom-modal" :class="chooseBillModal.isOpen ? 'show' : ''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white solid-bottom  hadow shadow-lg">
					<view class="action text-blue" @tap="hideChooseBillModal">取消</view>
					<view class="action text-green" @tap="onChooseBillModalOk">确定</view>
				</view>
				<view class="cu-form-group">
					<view class="title">单据类型</view>
					<picker @change="
									e => {
										bill_type_idx = e.detail.value;
										onBillTypePickerChange();
									}
								"
					 :value="bill_type_idx" :range="bill_types" range-key="type_name">
						<view class="picker">
							<text v-if="bill_type_idx > -1 && bill_types[bill_type_idx]">{{ bill_types[bill_type_idx].type_name }}</text>
							<text v-else style="color:#888">请选择单据类型</text>
						</view>
					</picker>
				</view>
				<view class="cu-form-group solid-bottom hadow shadow-lg" style="text-align: left;">
					<view class="title">单号</view>
					<input :disabled="bill_type_idx === -1 || !bill_types[bill_type_idx]" placeholder="输入单号搜索" @input="
									e => {
										chooseBillModal.searchText = (e.detail.value + '').toUpperCase();
									}
								"
					 :value="chooseBillModal.searchText" name="input" type="text" @confirm="onBillSearch" />
					<button :disabled="bill_type_idx === -1 || !bill_types[bill_type_idx]" class="cu-btn sm  line-blue" @click="onBillSearch">搜索</button>
				</view>
				<view class="">
					<my-list-viewer ref="listViewRef" height="70%" style="width:100%" :i="-1" :down="{ use: false }" width="100%" :top="0"
					 @loadData="onChooseBillModalLoadData">
						<checkbox-group v-if="muiltSelect" @change="onChooseBillModalCheckboxChanged">
							<!-- 多选 -->
							<view style="border-top:1px solid #ccc"></view>
							<label class="cu-form-group" v-for="(item, idx) in chooseBillModal.bills" :key="idx">
								<view class="title">
									<text>{{ item.bill_id }}</text>
								</view>
								<checkbox :class="item.checked ? 'checked' : ''" :value="idx + ''" :checked="item.checked"></checkbox>
							</label>
						</checkbox-group>
						<radio-group v-else @change="onChooseBillModalRadioChanged">
							<!-- 单选 -->
							<view style="border-top:1px solid #ccc"></view>
							<label class="cu-form-group" v-for="(item, idx) in chooseBillModal.bills" :key="idx">
								<view class="title">
									<text>{{ item.bill_id }}</text>
								</view>
								<radio name="orderNum" :checked="item.checked" :value="idx + ''"></radio>
							</label>
						</radio-group>
					</my-list-viewer>
				</view>
			</view>
		</view>

	</view>
	<!-- </view> -->
</template>

<script>
	import api from '@/serveices/wms-api.js';
	export default {
		model: {
			prop: 'value',
			event: 'billChange'
		},
		props: {
			readonly: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default () {
					// 默认理货
					return 'lihuo';
				}
			},
			optType: {
				type: String,
				default () {
					// 默认理货
					return 'PUTAWAY';
				}
			},
			muiltSelect: {
				type: Boolean,
				default: true
			},
			value: {
				type: String,
				default () {
					return ""
				}
			}
		},
		computed: {
			bigType() {
				let type = 1;
				if (this.optType == 'PICKUP') type = 2;
				return type;
			}
		},
		data() {
			return {
				bill_lock: false,
				bill: '',
				bill_confirm: -1,
				bill_types: [],
				bill_issure: false,
				bill_type_idx: -1,
				chooseBillModal: {
					isOpen: false,
					bills: [],
					searchText: ''
				}
			};
		},
		watch: {
			bill(newVal, oldVal) {
				if (newVal != oldVal) {
					this.unlock();
					this.$emit('billChange', newVal);
				}
			},
			value(newVal, oldVal) {
				if (newVal != oldVal) {
					this.bill = newVal
				}
			}
		},
		methods: {
			// 操作API
			lock() {
				this.bill_lock = true;
			},
			unlock() {
				this.bill_lock = false;
			},
			clear() {
				this.bill_lock = false;
				this.bill = '';
			},
			// 设置值并触发回车
			setValueAndTriggerEnter(bill, rowData, billTypeInfo, extData) {
				this.unlock();
				this.bill = bill;
				this.$emit('confirm', {
					bill: bill,
					row: rowData,
					billTypeInfo: billTypeInfo,
					extData: extData
				});
			},

			// confirmBill(bill, cancel) {
			// 	if (!cancel) {
			// 		this.bill = bill;
			// 		this.confirmed_bill = this.bill;
			// 		this.bill_issure = true;
			// 	} else {
			// 		this.bill = bill;
			// 		this.bill_issure = false;
			// 		this.confirmed_bill = -1;
			// 	}
			// },
			// // 单据确认
			// onBillKeyEnter(outBill) {
			// 	var bill = outBill || this.bill;
			// 	this.bill = bill
			// 	this.$emit('billKeyEnter', {
			// 		bill: bill
			// 	});
			// },

			// reset(bill, bill_type) {
			// 	if (bill) {
			// 		// this.bill = bill,
			// 	} else {
			// 		confirmBill(',false');
			// 		this.bill_type_idx = -1;
			// 	}
			// },

			openChooseBillModal() {
				this.chooseBillModal.isOpen = true;
				this.chooseBillModal.bills = [];
				this.chooseBillModal.searchText = '';
				this.bill_type_idx = -1;
			},
			hideChooseBillModal() {
				this.chooseBillModal.isOpen = false;
				this.bill_type_idx = -1;
			},
			onBillTypePickerChange() {
				this.chooseBillModal.searchText = '';
				this.onBillSearch();
			},
			onChooseBillModalLoadData(page) {
				console.log(page);
				const type = this.bill_types[this.bill_type_idx].bill_type;
				api.billmasterpage({
						bigType: this.bigType,
						opType: this.optType,
						billType: type,
						keyWords: this.chooseBillModal.searchText,
						page: page.num,
						rows: page.size
					})
					.then(res => {
						const pageData = res.data;
						pageData.forEach(x => {
							x.checked = false;
						});
						this.$refs.listViewRef.endSuccess(pageData.length);
						//设置列表数据
						if (page.num == 1) this.chooseBillModal.bills = []; //如果是第一页需手动制空列表
						this.chooseBillModal.bills = this.chooseBillModal.bills.concat(pageData); //追加新数据

						// ceshi
					})
					.catch(() => {
						this.$refs.listViewRef.endErr();
					});
			},

			onChooseBillModalOk() {
				let bills = this.chooseBillModal.bills.filter(x => x.checked);
				if (bills.length) {
					this.setValueAndTriggerEnter(bills.map(x => x.bill_id).join(','), this.muiltSelect ? null : bills[0], this.bill_type_idx >
						-1 ? this.bill_types[this.bill_type_idx] : null);
					this.hideChooseBillModal();
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择一个单据',
						duration: 2000
					});
				}
			},
			onChooseBillModalCheckboxChanged(e) {
				let values = e.detail.value;
				let bills = this.chooseBillModal.bills;
				for (var i = 0, lenI = bills.length; i < lenI; ++i) {
					const item = bills[i];
					if (values.includes(i + '')) {
						this.$set(item, 'checked', true);
					} else {
						if (item.checked) {
							this.$set(item, 'checked', false);
						}
					}
				}
			},
			//单选选中
			onChooseBillModalRadioChanged(e) {
				let values = e.detail.value;
				let bills = this.chooseBillModal.bills;
				let idx = parseInt(e.detail.value);
				for (var i = 0, lenI = bills.length; i < lenI; ++i) {
					const item = bills[i];
					if (item.checked) {
						this.$set(item, 'checked', false);
					}
					if (i === idx) {
						this.$set(item, 'checked', true);
					}
				}
			},

			onBillSearch() {
				// 搜索时重置 选中项
				this.$refs.listViewRef.resetUpScroll();
			}
		},
		beforeMount() {
			api.billtype_list(this.bigType).then(res => {
				this.bill_types.splice(0, 0, ...res.data);
			});
		}
	};
</script>

<style></style>
